<template>
    <view style="height: 100%">
        <top title="刀具商城" :show="2"></top>
        <van-search disabled :value="value" placeholder="请输入商品关键词搜索" shape="round" @tap.native="goSearch" />
        <view class="df">
            <scroll-view class="scroll-left" :style="'height:calc(100vh - ' + (navTop + 90) * 2 + 'rpx);padding-bottom:120rpx;  box-sizing: border-box;'" :scroll-y="true">
                <ul class="db">
                    <block v-for="(item, index) in left_list" :key="index">
                        <li :class="'left-list ' + (index == act ? 'bgcf' : '')" @tap.native="onLeft($event, { i: index })" :data-i="index">
                            <view class="act-line" v-if="index == act"></view>
                            <p :class="'left-text ovh2 ' + (index == act ? 'f600 c28' : '')">{{ item.name }}</p>
                        </li>
                    </block>
                </ul>
            </scroll-view>
            <scroll-view class="scroll-right" :style="'height:calc(100vh - ' + (navTop + 150) * 2 + 'rpx);'" :scroll-y="true">
                <ul class="df pd510 ac fw">
                    <block v-for="(item, index) in right_list" :key="index">
                        <navigator :url="'/pages/shopping/list?id=' + item.id" hover-class="none" open-type="navigate" class="pd10">
                            <image class="img60"  referrerPolicy='no-referrer' :src="item.thumb" />
                            <p class="db f12 c28 ovh2 w60 tc">{{ item.name }}</p>
                        </navigator>
                    </block>
                </ul>
            </scroll-view>
        </view>
        <view class="cart-box" @tap="goCart">
            <image class="kfs" src="https://wx.xtwaixie.com/img/gwc.png"></image>
            <p class="cart-num">{{ cart_num }}</p>
        </view>
        <tabbar></tabbar>
    </view>
</template>

<script>
import tabbar from '@/component/tabbar/tabbar';
import top from '@/component/top/top';
const app = getApp();
import http from '../../utils/http';
export default {
    components: {
        tabbar,
        top
    },
    data() {
        return {
            navTop: '',
            left_list: [],
            act: 0,
            right_list: [],
            cart_num: 0,
            value: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            navTop: app.globalData.navTop
        });
        this.getBase();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.wxAuthLogin();
        let token = uni.getStorageSync('token');
        if (token) {
            this.getInfo();
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getBase() {
            http.request('base/categoryList')
                .then((res) => {
                    this.setData({
                        left_list: res.data.list,
                        right_list: res.data.list[0].level
                    });
                })
                .catch((res) => {
                    console.log(res);
                });
        },

        getInfo() {
            http.request('user/userInfo')
                .then((res) => {
                    this.setData({
                        cart_num: res.data.cart_count || 0
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        goCart() {
            uni.navigateTo({
                url: '/pages/cart/cart'
            });
        },

        onLeft(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let i = e.currentTarget.dataset.i;
            let list = this.left_list;
            this.setData({
                act: i,
                right_list: list[i].level
            });
            console.log(this.left_list);
        },

        goSearch() {
            uni.navigateTo({
                url: '/pages/shopping/search'
            });
        },

        wxAuthLogin() {
            let that = this;
            uni.login({
                complete: (res) => {
                    let data = {
                        code: res.code
                    };
                    let h = {
                        'content-type': 'application/x-www-form-urlencoded'
                    };
                    uni.request({
                        url: http.appUrl + 'login/getLogin',
                        data: data,
                        method: 'POST',
                        header: h,
                        success: (res) => {
                            uni.setStorageSync('token', res.data.data.token.token);
                            uni.setStorageSync('is_login', res.data.code);
                        },
                        fail(res) {
                            console.log(res);
                        }
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './shopping.css';
</style>
